<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        button {
            width: 200px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            border: none;
            cursor: pointer;
            outline: none;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0px 0px 10px #666;
        }
        
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            position: absolute;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="app">
        <h1>{{title}}</h1>
        <button v-shuibowen="">点我发散水波纹</button>
        <!-- <div class="box" v-shuibowen=""></div> -->
    </div>
    <script>
        //自定义指令
        Vue.directive('shuibowen', {
            inserted: function(el, binding) {
                el.addEventListener('click', function(e) {
                    let x = e.clientX - el.offsetLeft
                    let y = e.clientY - el.offsetTop

                    //在鼠标位置增加一个span标签
                    let span = document.createElement("span")
                    span.style.position = "absolute"
                    span.style.background = binding.value || 'rgba(150, 91, 91, .5)'
                    span.style.opacity = 1;
                    span.style.borderRadius = '50%'
                    el.append(span)
                    let width = 0
                    let height = 0
                    let opacity = 1
                    let max_length = Math.sqrt(el.offsetWidth * el.offsetWidth + el.offsetHeight * el.offsetHeight) * 2

                    let time = setInterval(() => {
                        width += 5
                        height += 5
                        opacity -= 0.01
                        if (width < max_length) {
                            span.style.width = width + 'px'
                            span.style.height = height + 'px'
                            span.style.opacity = opacity;
                            span.style.left = x - span.offsetWidth / 2 + 'px'
                            span.style.top = y - span.offsetHeight / 2 + 'px'
                        } else {
                            clearInterval(time)
                            time = null;
                            span.remove()
                        }
                    }, 10)
                })

            }
        })
        const vm = new Vue({
            data: {
                title: "自定义指定设置水波纹"
            }
        }).$mount(".app")
    </script>
</body>

</html>